<script setup lang='ts'>
import {ref, reactive, PropType, onBeforeMount} from 'vue'
import {FormRules, ElMessage} from 'element-plus'
import {FromItem} from '@/components/dFrom/dFrom'
import {DepartmentFormInfor, saveDepartmentInfor} from '@/api/physicalExaminationManager/department'
import {DialogType} from '@/api/config'
import dDialog from '@/components/dDialog/dDialog.vue'
import dFrom from '@/components/dFrom/dFrom.vue'
import {Normal, Alphanumeric, PositiveInteger} from '@/util/common'
import useStore from '@/store/common'
import {transfDicArrData, getObjectByKey} from '@/util/common'
//是否显示
const props = defineProps({
  //显示
  showDialog:{
    type:Boolean,
    required:true
  },
  //弹窗类型
  dialogType:{
    type:String as PropType<DialogType>,
    required:true
  },
  //数据
  departmentData:{
    type:Object as PropType<DepartmentFormInfor>,
    required:true
  }
})

const {store} = useStore.setup()

const emits = defineEmits(['close'])

// 弹窗标题定义
const title = ref('')

// 弹窗标题设置
const initTitle = () => {
  if (props.dialogType === 'add') {
    title.value = '新增科室'
  }
  else if (props.dialogType === 'edit') {
    title.value = '编辑科室'
  }
}

//信息
const fromData:DepartmentFormInfor = reactive(props.departmentData)

// 显示加载状态
const showSaveLoading = ref(false)

// 表单规则
const rules = reactive<FormRules>({
  deptCode:[
    {required:true, message: '请输入科室编码', trigger: ['change', 'blur']},
    {required:true, message:'长度应不超过50个字符', max:50, trigger: ['change', 'blur']},
    {required:true, message:'应输入字母、数字', pattern:Alphanumeric, trigger:['change', 'blur']}
  ],
  deptName:[
    {required:true, message: '请输入科室名称', trigger: ['change', 'blur']},
    {required:true, message:'长度应不超过50个字符', max:50, trigger: ['change', 'blur']},
    {required:true, message:'应输入汉字、字母、数字、字符', pattern:Normal, trigger:['change', 'blur']}
  ],
  checkType:[
    {required:true, message: '请选择检查类型', trigger: ['change', 'blur']}
  ],
  sort:[
    {required:true, message: '请输入排序', trigger: ['change', 'blur']},
    {required:true, message:'应输入正整数', pattern:PositiveInteger, trigger:['change', 'blur']}
  ]
})

//表单项
const fromItems = ref<Array<FromItem>>([
  {label:'科室编码', placeholder:'请输入科室编码', prop:'deptCode', type:'input'},
  {label:'科室名称', placeholder:'请输入科室名称', prop:'deptName', type:'input'},
  {label:'检查类型', placeholder:'请选择检查类型', prop:'checkType', type:'selete', seleteData:[], disabled:props.dialogType === 'edit'},
  {prop: 'sort', label: '排序', type: 'inputNumber', step: 1, min: 1}
])

//表单清除控制
const resetFieldsFlag = ref(false)

const validateFlag = ref(false)

// 确认按钮
const onConfirm = () => {
  validateFlag.value = !validateFlag.value
}

//关闭
const onClose = () => {
  emits('close')
  //关闭后清除表单数据以及表单验证数据 可根据具体业务自行调整
  resetFieldsFlag.value = !resetFieldsFlag.value
}

//取消按钮
const onCancel = () => {
  onClose()
}

//表单验证通过事件
const onSubmit = () => {
  showSaveLoading.value = true
  saveDepartmentInfor(fromData).then(() => {
    showSaveLoading.value = false
    ElMessage.success('保存成功！')
    emits('close')
  }).catch((error) => {
    showSaveLoading.value = false
    console.warn(error)
  })
}
//获取字典
const getDic = () => {
  store.getDicData('check_type').then((res) => {
    const item = getObjectByKey(fromItems.value, 'prop', 'checkType')
    if (item && item.type === 'selete') {
      item.seleteData = transfDicArrData(res)
    }
  })
}

onBeforeMount(() => {
  getDic()
  initTitle()
})

</script>

<template>
  <d-dialog
    :title="title"
    custom-class="edit"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <d-from
      label-position="right"
      :label-width="100"
      :reset-fields-flag="resetFieldsFlag"
      :validate-flag="validateFlag"
      :rules="rules"
      method="post"
      :form-data="fromData"
      :form-items="fromItems"
      :form-line-num="1"
      @submit="onSubmit"
    />
  </d-dialog>
</template>
<style>
.edit{
  width: 600px;
}
</style>
<style scoped>
</style>